<link rel="stylesheet" href="../assets/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../assets/font-awesome/4.5.0/css/font-awesome.min.css"/>

<!-- page specific plugin styles -->
<link rel="stylesheet" href="../assets/css/jquery-ui.custom.min.css"/>
<link rel="stylesheet" href="../assets/css/jquery.gritter.min.css"/>
<link rel="stylesheet" href="../assets/css/select2.min.css"/>
<link rel="stylesheet" href="../assets/css/bootstrap-datepicker3.min.css"/>
<link rel="stylesheet" href="../assets/css/bootstrap-editable.min.css"/>
<link rel="stylesheet" href="../assets/css/sweetalert.css">
<!-- text fonts -->
<link rel="stylesheet" href="../assets/css/fonts.googleapis.com.css"/>

<!-- ace styles -->
<link rel="stylesheet" href="../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>

<!--[if lte IE 9]>
<link rel="stylesheet" href="../assets/css/ace-part2.min.css" class="ace-main-stylesheet"/>
<![endif]-->
<link rel="stylesheet" href="../assets/css/ace-skins.min.css"/>
<link rel="stylesheet" href="../assets/css/ace-rtl.min.css"/>
<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../assets/js/sweetalert.min.js"></script>
<!-- ace settings handler -->
<script src="../assets/js/ace-extra.min.js"></script>

<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

<!--[if lte IE 8]>
<script src="../assets/js/html5shiv.min.js"></script>
<script src="../assets/js/respond.min.js"></script>
<![endif]-->

<div class="main-content">
    <div class="main-content-inner">
        <div class="page-content">
            <div class="page-header">
                <h1>
                    考勤系统
                </h1>
            </div><!-- /.page-header -->

            <div class="row">
                <div class="col-xs-12">
                    <!-- PAGE CONTENT BEGINS -->

                    <div>
                        <div id="user-profile-1" class="user-profile row">
                            <div class="col-xs-12 col-sm-3 center">
                                <div>
												<span class="profile-picture">
													<img id="avatar" class="editable img-responsive" alt="Alex's Avatar"
                                                         src="../assets/images/avatars/profile-pic.jpg"/>
												</span>

                                    <div class="space-4"></div>

                                    <div class="width-80 label label-info label-xlg arrowed-in arrowed-in-right">
                                        <div class="inline position-relative">
                                            <i class="ace-icon fa fa-circle light-green"></i>
                                            &nbsp;
                                            <span id="employeeName" class="white"></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="space-6"></div>

                            </div>

                            <div class="col-xs-12 col-sm-9">
                                <div class="profile-user-info profile-user-info-striped">
                                    <div class="profile-info-row">
                                        <div class="profile-info-name"> 姓名</div>

                                        <div class="profile-info-value">
                                            <span class="editable" id="username"></span>
                                        </div>
                                    </div>

                                    <div class="profile-info-row">
                                        <div class="profile-info-name"> 所属部门</div>

                                        <div class="profile-info-value">
                                            <i class="fa fa-map-marker light-orange bigger-110"></i>
                                            <span class="editable" id="departmentName"></span>
                                        </div>
                                    </div>

                                    <div class="profile-info-row">
                                        <div class="profile-info-name"> 职位</div>

                                        <div class="profile-info-value">
                                            <span class="editable" id="level"></span>
                                        </div>
                                    </div>

                                    <div class="profile-info-row">
                                        <div class="profile-info-name"> 本月请假次数</div>

                                        <div class="profile-info-value">
                                            <span class="editable" id="numberOfLeaves"></span>
                                        </div>
                                    </div>

                                    <div class="profile-info-row">
                                        <div class="profile-info-name"> 本月外出次数</div>

                                        <div class="profile-info-value">
                                            <span class="editable" id="numberOfFields"></span>
                                        </div>
                                    </div>

                                    <div class="profile-info-row">
                                        <div class="profile-info-name"> 备注</div>

                                        <div class="profile-info-value">
                                            <span class="editable" id="memo">不要再请假了啊，这个月工资要扣没了！！</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="space-20"></div>

                                <div class="widget-box transparent">
                                    <div class="widget-header widget-header-small">
                                        <h4 class="widget-title blue smaller">
                                            <i class="ace-icon fa fa-rss orange"></i>
                                            今日请假员工
                                        </h4>

                                        <div class="widget-toolbar action-buttons">
                                            <a href="#" onclick="reloadNotice()">
                                                <i class="ace-icon fa fa-refresh blue"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main padding-8">
                                            <div id="profile-feed-1" class="profile-feed">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="hr hr2 hr-double"></div>

                                <div class="space-6"></div>

                            </div>
                        </div>
                    </div>
                    <!-- PAGE CONTENT ENDS -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.page-content -->
    </div>
</div><!-- /.main-content -->

<script type="text/javascript">
    $(function () {
        loadUserInfo();
        loadNotice();
    });
    function loadUserInfo() {
        $.ajax({
            url: "/employee/getUserInfo",
            type: 'GET',
            async: false,
            success: function (result) {
                if (result.success) {
                    var employee = result.user;
                    employeeName.innerHTML = employee.name;
                    username.innerHTML = employee.name;
                    departmentName.innerHTML = employee.departmentName;
                    level.innerHTML = levelFormatter(employee.level);
                } else {
                    sweetAlert("Oops...", result.message, "error");
                }
            },
            error: function (result) {
                sweetAlert("Oops...", "加载失败", "error");
            }
        });
        $.ajax({
            url: "/leaves/getNumberOfMonth",
            type: 'GET',
            async: false,
            success: function (result) {
                if (result.success) {
                    numberOfLeaves.innerHTML = result.number;
                } else {
                    sweetAlert("Oops...", result.message, "error");
                }
            },
            error: function (result) {
                sweetAlert("Oops...", "加载失败", "error");
            }
        });
        $.ajax({
            url: "/fields/getNumberOfMonth",
            type: 'GET',
            async: false,
            success: function (result) {
                if (result.success) {
                    numberOfFields.innerHTML = result.number;
                } else {
                    sweetAlert("Oops...", result.message, "error");
                }
            },
            error: function (result) {
                sweetAlert("Oops...", "加载失败", "error");
            }
        });
    }
    function levelFormatter(value, row, index) {
        if (value == 1)
            return "普通员工";
        else if (value == 2)
            return "部门经理";
        else if (value == 3)
            return "总经理";
        else
            return "管理员"
    }

    function reloadNotice() {
        $("#profile-feed-1").empty();
        loadNotice();
    }
    function loadNotice() {
        $.ajax({
            url: "/leaves/getTodayLeaves",
            type: 'GET',
            async: false,
            success: function (result) {
                if (result.success) {
                    var leaves = result.leaves;
                    for (var i = 0; i < leaves.length; i++) {
                        var tempHtml = ' <div class="profile-activity clearfix"><div><img class="pull-left" ' +
                                'src="../assets/images/avatars/avatar4.png" /><a class="user" href="#"> ' + leaves[i].employeeName + '</a>' + leaves[i].typeName + '<div class="time"><i class="ace-icon fa fa-clock-o bigger-110"></i>' + dateFormatter(leaves[i].startTime) + '——' + dateFormatter(leaves[i].endTime) + '</div></div></div>';
                        $("#profile-feed-1").append(tempHtml);
                    }
                } else {
                    sweetAlert("Oops...", result.message, "error");
                }
            },
            error: function (result) {
                sweetAlert("Oops...", "加载失败", "error");
            }
        });
        $.ajax({
            url: "/fields/getTodayFields",
            type: 'GET',
            async: false,
            success: function (result) {
                if (result.success) {
                    var fields = result.fields;
                    for (var i = 0; i < fields.length; i++) {
                        var tempHtml = ' <div class="profile-activity clearfix"><div><img class="pull-left" ' +
                                'src="../assets/images/avatars/avatar5.png" /><a class="user" href="#"> ' + fields[i].employeeName + '</a>外出<div class="time"><i class="ace-icon fa fa-clock-o bigger-110"></i>' + dateFormatter(fields[i].startTime) + '——' + dateFormatter(fields[i].endTime) + '</div></div></div>';
                        $("#profile-feed-1").append(tempHtml);
                    }
                } else {
                    sweetAlert("Oops...", result.message, "error");
                }
            },
            error: function (result) {
                sweetAlert("Oops...", "加载失败", "error");
            }
        });
    }
    function dateFormatter(value, row, index) {
        if (value != null)
            return new Date(value).Format("yyyy-MM-dd");
        else
            return "-";
    }
    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1,                 //月份
            "d+": this.getDate(),                    //日
            "h+": this.getHours(),                   //小时
            "m+": this.getMinutes(),                 //分
            "s+": this.getSeconds(),                 //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
</script>
